<template>
  <el-dialog title="打印盒脊" :visible.sync="printBoxOpen" width="1200px" append-to-body :before-close="closeDelDialog">
    <div class="app-container">
      <div style="padding-left: 80%">
        <el-button type="danger" plain size="medium" @click="print">打印</el-button>
        <el-button @click="closeDelDialog">取 消</el-button>
      </div>
      <div style="padding: 1%;">
        <div class="custom-table">
          <div v-for="(boxData, index) in paginatedData" :key="index" class="box">
            <div v-for="(page, dataIndex) in boxData" :key="dataIndex" class="item">
              <table style="width: 100%">
                <td draggable="true">
                  <table class="table" align="center" id="table" cellspacing="0" cellpadding="0">
                    <tr>
                      <td>
                        <div>全宗号</div>
                        <div v-if="page.qzh != ''">{{ page.qzh }}</div>
                        <div v-else style="white-space: pre-wrap">{{ '  ' }}</div>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <div>起始年度</div>
                        <div v-if="page.stnd != ''">{{ page.stnd }}</div>
                        <div v-else style="white-space: pre-wrap">{{ '  ' }}</div>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <div>终止年度</div>
                        <div v-if="page.ednd != ''">{{ page.ednd }}</div>
                        <div v-else style="white-space: pre-wrap">{{ '  ' }}</div>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <div>保管期限</div>
                        <div v-if="page.bgqx != ''">{{ page.bgqx }}</div>
                        <div v-else style="white-space: pre-wrap">{{ '  ' }}</div>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <div style="display: inline-block; width: 40%;">
                          <div>起</div>
                          <div>止</div>
                          <div>件</div>
                          <div>号</div>
                        </div>
                        <div style="display: inline-block; width: 40%; border-left: 1px solid black;">
                          <div>起</div>
                          <div v-if="page.stnum != ''" style="white-space: pre-wrap">{{ page.stnum != null ? page.stnum : '  ' }}</div>
                          <div v-else style="white-space: pre-wrap">{{ '  ' }}</div>
                          <div style="border-top: 1px solid black;">止</div>
                          <div v-if="page.ednum != ''" style="white-space: pre-wrap">{{ page.ednum !== null ? page.ednum : '  ' }}</div>
                          <div v-else style="white-space: pre-wrap">{{ '  ' }}</div>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td style="border-bottom: 1px solid #fff;">
                        <div>盒号</div>
                        <div v-if="page.hehao != ''">{{ page.hehao }}</div>
                        <div v-else style="white-space: pre-wrap">{{ '  ' }}</div>
                      </td>
                    </tr>
                  </table>
                </td>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

  </el-dialog>
</template>

<script>
export default {
  name: "printBoxRidge",
  props: ["printBoxOpen"],
  data() {
    return {
      paginatedData: [], // 声明为响应式数据
      pageSize: 10
    }
  },
  created() {
    this.paginatedData = []
  },
  methods: {
    init(val){
      // console.log(val)
      this.obj = val
      this.calculatePaginatedData()
    },
    calculatePaginatedData() {
      const paginatedData = []
      const numPerBox = 10 // 每个盒子插入的数据数量
      const numBoxes = Math.ceil(this.obj.length / numPerBox) // 计算需要的盒子数量

      // 进行分页操作，每个page包含10条数据
      const pageSize = 10;
      const pageCount = Math.ceil(this.obj.length / pageSize) * 10;
      const emptyData = [];
      for (let i = 0; i < pageCount; i++) {
        emptyData.push({
          bgqx: '',
          ednd: '',
          ednum: '',
          hehao: '',
          qzh: '',
          stnd: '',
          stnum: ''
        })
      }
      for (let i = 0; i < emptyData.length; i++) {
        if(this.obj[i] != undefined) {
          emptyData[i] = this.obj[i]
        }
      }
      // 将数据分组插入到盒子中
      for (let i = 0; i < numBoxes; i++) {
        const start = i * numPerBox
        const end = start + numPerBox
        this.paginatedData.push(emptyData.slice(start, end))
      }
      // console.log(this.paginatedData)
    },
    //关闭页面
    closeDelDialog() {
      this.paginatedData = []
      this.$emit("printBoxCancel")
    },
    print() {
      const boxElements = document.querySelectorAll('.custom-table .box');
      console.log(boxElements)

      const iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      document.body.appendChild(iframe);
      const iframeDoc = iframe.contentWindow.document;
      iframeDoc.open();
      iframeDoc.write(`
        <html>
        <head>
        <style>
        @page {
          size: auto;
          margin: 10mm;
        }

        @media print {
          body, div, table {
            margin: 0;
            padding: 0;
            border: 0;
          }
          .box {
            display: flex;
            width: 100%;
            flex-direction: row; /* 确保是横向排列 */
            page-break-after: always; /* 在每个.box元素后插入分页符 */
          }

          .box .item {
            width: 10%;
          }

          .table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 5px;
            height: 400px;
          }

          .table tr td {
            height: 2.8em;
            line-height: 2.8em;
            white-space: nowrap;
            align-items: center;
            justify-content: flex-start;
            opacity: 1;
            color: #000000;
            letter-spacing: 2px;
            font-family: 仿宋;
            border-bottom: 1px solid #000;
            border-spacing: 0 1px;
            text-align: center;
          }
        }
        </style>
        </head>
        <body>
        ${Array.from(boxElements)
                .map(boxElement => boxElement.outerHTML)
                .join('')}
        <script>
          window.onload = function() {
          window.print();
          window.close();
          }
        <\/script>
        </body>
        </html>
      `);
      iframeDoc.close();
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-table .box {
  display: flex;
  width: 100%;
}

.custom-table .box .item {
  width: 10%
}
.table {
  width: 10%;
  border-collapse: separate; /* 设置表格边框不合并 */
  border-spacing: 5px; /* 设置单元格之间的间距为0 */
}

.table tr td{
  heigth: 2.5em;
  line-height: 2.5em;
  white-space: nowrap;
  align-items:center;
  justify-content:flex-start;
  opacity:1;
  color:#000000;
  letter-spacing:2px;
  font-family:仿宋;
  border-bottom: 1px solid #000; /* 设置单元格边框样式 */
  border-spacing: 0 5px;
  text-align: center; /* 设置单元格文本居中 */
}

</style>
